/*
 * @version: 
 * @Author: yu
 * @Date: 2023-07-17 17:05:30
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-18 15:16:40
 */
import React from 'react'
import { Table, Button, Modal, message } from "antd";
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
import { menuDel } from '../../request/api'

export default function List(props) {
  const { editInfo, menulist, getMenu } = props;
  const [modal, contextHolder] = Modal.useModal()
  const columns = [
    {
      title: '菜单编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '菜单名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: "上级菜单",
      dataIndex: "pid",
      key: "pid",
    },
    {
      title: "菜单图标",
      dataIndex: "icon",
      key: "icon",
    },
    {
      title: "菜单地址",
      dataIndex: "url",
      key: "url",
    },

    {
      title: "状态",
      dataIndex: "status",
      key: "status",
    },
    {
      title: '操作',
      key: 'action',
      render(e, record) {
        console.log(e, record);
        return (
          <div>
            <Button
              onClick={() => edit(record.id)}
              size="small"
              type="primary"
              shape="circle"
              ghost
              icon={<EditOutlined />}
            />
            <Button
              onClick={() => del(record.id)}
              size="small"
              type="primary"
              danger
              shape="circle"
              ghost
              icon={<DeleteOutlined />}
            />
          </div>
        );
      },
    },
  ];
  //封装一个编辑时间呢
  const edit = (id) => {
    // console.log(id);
    editInfo(id)
  }
  //封装一个删除事件接口
  const del = (id) => {
    modal.confirm({
      title: "确认",
      icon: <ExclamationCircleOutlined />,
      content: "你确定要删除吗",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        //调用接口
        menuDel({ id })
          .then(res => {
            if (res.code == 200) {
              getMenu()
              message.success(res.msg)
            } else {
              message.error(res.msg)
            }
          })
      }
    });
  };
  return (
    <div>
      {contextHolder}
      <Table
        rowKey="id"
        dataSource={menulist}
        columns={columns}
        pagination={false}
      />
    </div>
  )
}
